<template>
  <div ref="imageEl" class="je-admin-top-logo">
    <img
      v-if="image"
      :src="computeLog"
      :class="{
        'logo-image': true,
        'je-theme-color-weak': grayMode,
      }"
      @load="onImageLoad"
    />
    <div v-else class="logo"></div>
  </div>
</template>
<script>
  import { useMenuStore } from '@/stores/menu-store';
  import { useThemeStore } from '@common/store/theme-store';
  import { computed, defineComponent, ref, onMounted, nextTick } from 'vue';
  import logo from '../assets/logo.png';
  export default defineComponent({
    name: 'AdminTopMenuLogo',
    props: {
      image: { type: Boolean, default: true },
    },
    emits: ['image-load'],
    setup(props, { expose, emit }) {
      const menuStore = useMenuStore();
      const themeStore = useThemeStore();
      const computeLog = computed(() => menuStore.topMenuLogo || logo);
      // 浅色模式，使用灰度
      const grayMode = computed(
        () => themeStore.getThemeInfo(themeStore.headerTheme)?.colour === 'light',
      );
      // 图片尺寸
      const imageEl = ref();
      const onImageLoad = () => {
        emit('image-load');
      };
      expose({
        getSize() {
          return imageEl.value?.offsetWidth ?? 200;
        },
      });
      onMounted(() => {
        nextTick(() => {
          if (!props.image) {
            onImageLoad();
          }
        });
      });
      return { computeLog, grayMode, imageEl, onImageLoad };
    },
  });
</script>
<style lang="less">
  .je-admin-top-logo {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    .logo {
      background: transparent;
      opacity: 0.3;
      height: 60%;
      width: 200px;
      &-image {
        height: 60px;
        width: auto;
      }
    }
  }
</style>
